import React from "react";
import './style.css'
export interface IProgressProps{
    step?:number;
    total?:number;
    showInfo?:boolean;
    color?:string;
    width?:number;
    barWidth?:number;
    prefixCls?:string;/**更好的对组件样式定制 */
}

const ProgressBar:React.FC<IProgressProps>=(props)=>{
    const {
        prefixCls,
        barWidth,
        step,
        total,
        showInfo,
        color,
        ...restProps
    }=props
    let percent,
        text,
        progressInfo,
        progress;
    // 封装
    const percentDeal=(step:number | undefined,
        total:number | undefined):number=>{
            if(!step||!total){
                return 0;
            }
        return (step/total)*100;
    }
    const validProgress=(progress:number|undefined)=>{
        if(!progress|| progress<0){
            return 0;
        }else if(progress > 100){
            return 100;
        }
        return progress;
    }
    const parseIntPercent=(text:number):string=>`${Math.ceil(text)}%`;
    percent=percentDeal(step,total);
    text=parseIntPercent(validProgress(percent));
    const fixTipsStyle={
        left:text 
    }
    if (showInfo){
        progressInfo=(
            <div className={`${prefixCls}-show-info`}>
                <span className={`${prefixCls}-text`}>{text}</span>
            </div>
        )
    }
    const percentStyle={
        width:text,
        height:"12px",
        background:color,
        borderRadius:"100px"
    }
    const fixOuterStyle={
        marginTop:"30px"
    }

    progress=(
        <div>
            <div className={`${prefixCls}-outer`} style={fixOuterStyle}>
                <div className={`${prefixCls}-inner`}>
                    <div className={`${prefixCls}-bg`} style={percentStyle}>
                        {progressInfo || null}
                    </div>
                </div>
            </div>
        </div>
    )
    return(
        <div {...restProps} className="tiger-progress">
            {progress}
        </div>
    )
}

export default ProgressBar